<template>
  <div class="ofd-page" id="ofd-page" v-loading="ofdLoading"  v-resize="changeWidth" :class="[formShare && 'ofd-page-share',isMobile_new && 'ofd-page-mobile']">
    <div id="ofd-box" class="ofd-box"></div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  computed
} from 'vue' 
import { getFileByte } from '@/api/common'
import { parseOfdDocument,renderOfd } from './util/ofd/ofd'
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits(["renderFinish"])
const props = defineProps({
  id:{
    type:String
  },
  nodeInfo:{
    type:Object,
    default(){
      return {}
    }
  },
  formShare:{
    type:Boolean,
    default:false
  }
})
const file = ref<any>(null)
const ofdLoading = ref(false)
watch(()=>props.id,(newV,oldV)=>{
  init()
})
onMounted(()=>{
  init()
})
const isMobile_new = computed(()=>{
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  return flag;
})
function changeWidth(){
  renderOfdPage()
}
function init(){
  ofdLoading.value = true
  getFileByte({id:props.id},'arraybuffer').then(res=>{
    /* 火狐谷歌的文件下载方式 */
    let data = res.data
    if(props.nodeInfo.name.indexOf(`.${props.nodeInfo.nameSuffix}`)!=-1){
      file.value = new File([data],`${props.nodeInfo.name}`)
    }else{
      file.value = new File([data],`${props.nodeInfo.name}.${props.nodeInfo.nameSuffix}`)
    }
    if(file.value && file.value.size>0){
      renderOfdPage()
    }
  }).finally(f=>{
    ofdLoading.value = false
  })
}
function  renderOfdPage(){
  parseOfdDocument({
    ofd: file.value,
    success(res) {
      let screenWidth = document.getElementById('ofd-page').clientWidth
      const divs = renderOfd(screenWidth, res[0]);
      displayOfdDiv(divs);
    },
    fail(error) {
      
    }
  })
}
function displayOfdDiv(divs) {
  // this.scale = getPageScale();
  let contentDiv:any = document.getElementById('ofd-box');
  contentDiv.innerHTML = '';
  for (const div of divs) {
    contentDiv.appendChild(div)
  }
  emit('renderFinish')
  // for(let ele of document.getElementsByName('seal_img_div')) {
  //   this.addEventOnSealDiv(ele, JSON.parse(ele.dataset.sesSignature), JSON.parse(ele.dataset.signedInfo));
  // }
}
</script>
<style lang="scss" scoped>
.ofd-page{
  .ofd-box{
    background-color: rgb(128, 128, 128);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 252px);
    padding: 20px 0px;
    box-sizing: border-box;
  }
}
.ofd-page-share{
  .ofd-box{
    height: calc(100vh - 70px) !important;
  }
}
.ofd-page-mobile{
  .ofd-box{
    height: calc(100vh - 52px) !important;
  }
}
::v-deep(.mask_div){
  z-index: 1000 !important;
}
</style>